<template>
  <!-- <treeselect class="tree-select" :style="{ width: width + 'px', height: height + 'px', lineHeight: height + 'px', }"
    :append-to-body="true" :disable-branch-nodes="true" v-model="sysProjectId" :options="treeData"
    :normalizer="normalizer" :clearable="clearable" placeholder="请选择项目">
    <div slot="value-label" slot-scope="{ node }" class="customize-select">
      <span class="left-label is-branch" v-show="sysProjectId">{{ node.label }}</span>
      <span v-show="sysProjectId">{{ node.raw.deptNameShort }}</span>
    </div>
    <label slot="option-label" slot-scope="{ node}" class="customize-select">
      <span v-if="node.isBranch">{{ node.raw.shortLable }}</span>
      <span v-if="node.isLeaf" class="left-label" :title="node.label">{{ node.label }}</span>
      <span v-if="node.isLeaf" class="right-label" :title="node.raw.deptName">{{ node.raw.deptNameShort }}</span>
    </label>
  </treeselect> -->

  <el-select v-model="sysProjectId" placeholder="请选择项目" style="width: 100%;" filterable>
    <el-option v-for="item in treeData" :key="item.projectId" :label="item.projectName" :value="item.projectId" />
  </el-select>
</template>
<script>
export default {
  name: "ProjectTreeSelectInner",
  props: {
    projectId: {
      type: String,
      default () {
        return this.$store.state.project.projectId;
      }
    },
    // 树结构数据
    data: {
      type: Array,
      default () {
        return [];
      }
    },
    canCallBack: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {};
  },
  computed: {
    treeData: {
      get () {
        return this.$store.state.project.projectList;
      }
    },
    sysProjectId: {
      get () {
        return this.projectId;
      },
      set (val) {
        if (this.canCallBack) {
          this.$emit('changeProject', val);
        } else {
          this.$store.dispatch("changeProject", val);
        }
      }
    }
  },
  created () { },
  mounted () { },
  methods: {
  }
};
</script>
<style lang="scss" scoped>
.is-branch {
  position: relative;
  left: 0px !important;
}

.left-label {
  position: relative;
  left: 0px;
  width: calc(100% - 50px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #606060;
  font-weight: 500;
}

.right-label {
  display: inline-block;
  width: 45px;
  /* 定义容器的宽度 */
  white-space: nowrap;
  /* 防止文本换行 */
  overflow: hidden;
  /* 隐藏超出的文本 */
  text-overflow: ellipsis;
  /* 显示省略号 */
}

::v-deep {
  .vue-treeselect__control {
    height: 32px !important;
  }

  .vue-treeselect__placeholder,
  .vue-treeselect__single-value {
    line-height: 32px !important;
  }

  .vue-treeselect__input {
    height: 32px !important;
  }

  .vue-treeselect__options {}

  .vue-treeselect__control {}


}
</style>
